<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket 测试工具</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
    }
    .container {
      background: white;
      border-radius: 10px;
      padding: 30px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }
    h1 {
      color: #333;
      text-align: center;
      margin-bottom: 30px;
    }
    .section {
      margin-bottom: 30px;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
    }
    .section h2 {
      color: #667eea;
      margin-top: 0;
      font-size: 18px;
    }
    label {
      display: block;
      margin-bottom: 8px;
      color: #555;
      font-weight: 500;
    }
    input, textarea {
      width: 100%;
      padding: 10px;
      border: 2px solid #e0e0e0;
      border-radius: 5px;
      font-size: 14px;
      transition: border-color 0.3s;
      box-sizing: border-box;
    }
    input:focus, textarea:focus {
      outline: none;
      border-color: #667eea;
    }
    textarea {
      min-height: 100px;
      font-family: 'Courier New', monospace;
      resize: vertical;
    }
    button {
      background: #667eea;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      transition: all 0.3s;
      margin-right: 10px;
      margin-top: 10px;
    }
    button:hover {
      background: #5568d3;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    button:active {
      transform: translateY(0);
    }
    .status {
      padding: 12px;
      border-radius: 5px;
      margin-bottom: 15px;
      font-weight: 500;
    }
    .status.connected {
      background: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }
    .status.disconnected {
      background: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }
    .log {
      background: #1e1e1e;
      color: #d4d4d4;
      padding: 15px;
      border-radius: 5px;
      font-family: 'Courier New', monospace;
      font-size: 12px;
      max-height: 300px;
      overflow-y: auto;
      white-space: pre-wrap;
      word-break: break-all;
    }
    .log-entry {
      margin-bottom: 8px;
      padding: 5px;
      border-left: 3px solid #667eea;
      padding-left: 10px;
    }
    .log-entry.error {
      border-left-color: #f44336;
      color: #ff6b6b;
    }
    .log-entry.success {
      border-left-color: #4caf50;
      color: #69f0ae;
    }
    .quick-msg {
      display: inline-block;
      padding: 6px 12px;
      margin: 5px 5px 5px 0;
      background: #e3f2fd;
      border: 1px solid #90caf9;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s;
    }
    .quick-msg:hover {
      background: #bbdefb;
      transform: scale(1.05);
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🔌 WebSocket 测试工具</h1>
    
    <!-- 连接状态 -->
    <div class="section">
      <h2>📡 连接状态</h2>
      <div id="status" class="status disconnected">未连接</div>
      <div>
        <label for="wsUrl">WebSocket URL:</label>
        <input type="text" id="wsUrl" value="ws://localhost:8001/indiv/ws/" placeholder="ws://localhost:8001/indiv/ws/">
      </div>
      <div style="margin-top: 15px;">
        <label for="clientId">客户端 ID (用户ID):</label>
        <input type="text" id="clientId" value="1" placeholder="输入用户ID">
      </div>
      <button onclick="connect()">🔌 连接</button>
      <button onclick="disconnect()">❌ 断开</button>
    </div>

    <!-- 发送消息 -->
    <div class="section">
      <h2>📤 发送消息</h2>
      <div style="margin-bottom: 15px;">
        <strong>快速模板：</strong><br>
        <span class="quick-msg" onclick="useTemplate('success')">✅ 审核成功</span>
        <span class="quick-msg" onclick="useTemplate('pending')">⏳ 审核中</span>
        <span class="quick-msg" onclick="useTemplate('failed')">❌ 审核失败</span>
        <span class="quick-msg" onclick="useTemplate('custom')">💬 自定义消息</span>
      </div>
      <label for="message">消息内容 (JSON):</label>
      <textarea id="message" placeholder='{"type": "success", "title": "测试", "content": "这是一条测试消息"}'></textarea>
      <button onclick="sendMessage()">📨 发送消息</button>
      <button onclick="clearLog()">🗑️ 清空日志</button>
    </div>

    <!-- 日志 -->
    <div class="section">
      <h2>📋 消息日志</h2>
      <div id="log" class="log">等待连接...</div>
    </div>
  </div>

  <script>
    let ws = null;
    
    const templates = {
      success: {
        type: 'success',
        title: '实名认证成功',
        content: '恭喜！您的实名认证已通过，姓名：张三',
        status: 1,
        timestamp: Date.now()
      },
      pending: {
        type: 'info',
        title: '审核中',
        content: '您的实名认证正在审核中，请耐心等待1-3个工作日',
        status: 2,
        timestamp: Date.now()
      },
      failed: {
        type: 'error',
        title: '审核失败',
        content: '很抱歉，您的身份证照片不清晰，请重新上传',
        status: 0,
        timestamp: Date.now()
      },
      custom: {
        type: 'message',
        title: '系统通知',
        content: '这是一条自定义消息',
        timestamp: Date.now()
      }
    };

    function useTemplate(type) {
      document.getElementById('message').value = JSON.stringify(templates[type], null, 2);
    }

    function addLog(message, type = 'info') {
      const log = document.getElementById('log');
      const timestamp = new Date().toLocaleTimeString();
      const entry = document.createElement('div');
      entry.className = `log-entry ${type}`;
      entry.textContent = `[${timestamp}] ${message}`;
      log.appendChild(entry);
      log.scrollTop = log.scrollHeight;
    }

    function updateStatus(connected) {
      const status = document.getElementById('status');
      if (connected) {
        status.className = 'status connected';
        status.textContent = '✅ 已连接';
      } else {
        status.className = 'status disconnected';
        status.textContent = '❌ 未连接';
      }
    }

    function connect() {
      const wsUrl = document.getElementById('wsUrl').value;
      const clientId = document.getElementById('clientId').value;
      
      if (!clientId) {
        alert('请输入客户端ID');
        return;
      }
      
      const fullUrl = wsUrl + clientId;
      addLog(`正在连接到: ${fullUrl}`, 'info');
      
      try {
        ws = new WebSocket(fullUrl);
        
        ws.onopen = () => {
          addLog('✅ WebSocket 连接已建立', 'success');
          updateStatus(true);
        };
        
        ws.onmessage = (event) => {
          addLog('📨 收到消息: ' + event.data, 'success');
          try {
            const data = JSON.parse(event.data);
            addLog('📦 解析后的对象: ' + JSON.stringify(data, null, 2), 'info');
          } catch (e) {
            addLog('⚠️ 无法解析为JSON', 'error');
          }
        };
        
        ws.onerror = (error) => {
          addLog('❌ 连接错误: ' + error, 'error');
          updateStatus(false);
        };
        
        ws.onclose = () => {
          addLog('🔌 连接已关闭', 'info');
          updateStatus(false);
        };
      } catch (error) {
        addLog('❌ 连接失败: ' + error.message, 'error');
        updateStatus(false);
      }
    }

    function disconnect() {
      if (ws) {
        ws.close();
        ws = null;
        addLog('👋 手动断开连接', 'info');
        updateStatus(false);
      }
    }

    function sendMessage() {
      if (!ws || ws.readyState !== WebSocket.OPEN) {
        alert('WebSocket 未连接');
        return;
      }
      
      const message = document.getElementById('message').value;
      if (!message) {
        alert('请输入消息内容');
        return;
      }
      
      try {
        // 验证是否是有效的JSON
        JSON.parse(message);
        ws.send(message);
        addLog('📤 发送消息: ' + message, 'success');
      } catch (e) {
        alert('消息格式错误，请输入有效的JSON: ' + e.message);
      }
    }

    function clearLog() {
      document.getElementById('log').innerHTML = '';
      addLog('日志已清空', 'info');
    }

    // 初始化
    useTemplate('success');
    addLog('测试工具已就绪', 'info');
  </script>
</body>
</html>








